#root {
  height: 100%;
}
.app {
  display: flex;
  height: 100%;
}
/* 左边文件选择栏 */
.app .menu {
  width: 250px;
  /* flex-grow：这是项目的一个属性，定义了项目的放大比例，如果为0，即使有剩余空间也不会放大。 */
  flex-grow: 0;
  overflow: auto;
  max-width: 100%;
}

.app .menu ul {
  list-style: none;
  padding: 10px;
  margin: 0;
  /* 强制同一行内显示所有文本文字，让所有文字内容中一排显示不换行。 */
  white-space: nowrap;
  /* 
  cursor : 网页浏览时用户鼠标指针的样式或图形形状。
  属性值：
  default：默认光标（通常是一个箭头）
  auto：默认，浏览器设置的光标
  crosshair：光标为十字线
  pointer：光标为一只手 */
  cursor: pointer;
}

.app .menu ul h2 {
  color: black;
  font-size: 16px;
}
/* 文件被选中时的状态 */
.app .menu ul li.active {
  color: red;
}
/* 右边占满剩下的空间 */
.app .main {
  flex: 1;
  position: relative;
  flex-grow: 1;
}
